<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<h1>这是一个剪刀石头布游戏</h1>
		    <h2>请出拳吧!少年!</h2>
		    <h3>您已经获胜了<span id="win-count"></span>次!!!</h3>
		    <div id="choose">
		        <img src="img/b2.png" alt="剪刀" id="jiandao" width="200" height="200">
		        <img src="img/b0.png" alt="石头" id="shitou" width="200" height="200">
		        <img src="img/b1.png" alt="布" id="bu" width="200" height="200">
		    </div>
		    <img src="" id="yourchoose" alt="" width="200" height="200">
		    <span id="result"></span>
		    <img src="" id="computer" alt="" width="200" height="200">
			<style type="text/css">
			        * {
			            margin: 0;
			            padding: 0;
			        }
			        body {
			            background: gray;
			            text-align: center;
			            color: aqua;
			        }
			        #choose {
			            margin: 50px auto;
			            height: 200px;
			            width: 800px;
			        }
			        #choose img {
			            cursor: pointer;
			            margin-right: 95px;
			        }
			        #choose img:last-child {
			            margin-right: 0;
			        }
			        #result {
			            font-size: 20px;
			        }
			        #win-count {
			            font-size: 20px;
			            color: red;
			        }
			    </style>
				<script type="text/javascript">
				
				        function $ (id) {
				            return document.getElementById(id);
				        }
				
				        var winCount = 0;
				        function Game (choose) {
				            choose.addEventListener('click', function () {
				                if (choose == $('jiandao')) {
				                    $('yourchoose').src = "img/b2.png";
				                } else if (choose == $('shitou')) {
				                    $('yourchoose').src = "img/b0.png";
				                } else {
				                    $('yourchoose').src = "img/b1.png";
				                }
				                var computerResult = Math.random();
				                if (computerResult < 0.33) {
				                    $('computer').src = "img/b2.png";
				                    if (choose == $('jiandao')) {
				                        $('result').innerHTML = "平手";
				                    } else if (choose == $('shitou')) {
				                        $('result').innerHTML = "你赢了";
				                        winCount++;
				                    } else {
				                        $('result').innerHTML = "你输了";
				                    }
				                } else if (computerResult < 0.67) {
				                    $('computer').src = "img/b0.png";
				                    if (choose == $('shitou')) {
				                        $('result').innerHTML = "平手";
				                    } else if (choose == $('bu')) {
				                        $('result').innerHTML = "你赢了";
				                        winCount++;
				                    } else {
				                        $('result').innerHTML = "你输了";
				                    }
				                } else {
				                    $('computer').src = "img/b1.png";
				                    if (choose == $('bu')) {
				                        $('result').innerHTML = "平手";
				                    } else if (choose == $('jiandao')) {
				                        $('result').innerHTML = "你赢了";
				                        winCount++;
				                    } else {
				                        $('result').innerHTML = "你输了";
				                    }
				                }
				                $('win-count').innerHTML = winCount;
				            });
				        }
				
				        Game($('jiandao'));
				        Game($('shitou'));
				        Game($('bu'));
				    </script>
	</body>
</html>
